<!--底部导航-->
<template>
  <div class="nav-box">
    <ul>
      <li :class="{active: $route.name === 'home' }">
        <a :href="$route.name==='home' ? 'javascript:void(0)' : '#/main'">
          <span class="iconfont icon-home"></span>
          <p>首页</p>
        </a>
      </li>
      <li :class="{active: $route.name === 'MyCart' }">
        <a :href="$route.name==='MyCart' ? 'javascript:void(0)' : '#/main/mycart'">
          <span class="iconfont icon-card"></span>
          <p>购物车</p>
        </a>
      </li>
      <li :class="{active: $route.name === 'order' }">
        <a :href="$route.name==='order' ? 'javascript:void(0)' : '#/main/order'">
          <span class="iconfont icon-order"></span>
          <p>订单</p>
        </a>
      </li>
      <li :class="{active: $route.name === 'my' }">
        <a :href="$route.name==='my' ? 'javascript:void(0)' : '#/main/my'">
          <span class="iconfont icon-my"></span>
          <p>我的</p>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  components: {},

  computed: {},

  create () {

  },

  mounted () { },

  methods: {}
}

</script>
<style lang='scss' scoped>
@import "@/assets/scss/base.scss";
.nav-box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: $white;
  box-shadow: 0 0 5px 0 hsla(0, 6%, 58%, 0.6);
  ul {
    li {
      width: 25%;
      float: left;
      font-size: 12px;
      padding: 3px 0;
      text-align: center;

      &.active {
        a {
          color: $main;
        }
      }
      a {
        width: 100%;
        display: block;
        color: $blackcolor;
      }
    }
  }
}
</style>